<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
https://blog.csdn.net/qq_29689343/article/details/112556133
学习总结
1.概念
2.父元素即容器管控子元素如何排列，统一管理
3.子元素放松自己搞特例
一：容器「父元素属性】6个属性
1. display: flex 设置弹性布局
2.flex-direction 设置子元素即项目如何排列，水平，还是垂直，【包含反转】
3. flex-wrap 设置子元素即项目换行后的排列方式：1.不换行，2换行【如何排列：第一行在上or 还二行在上】，
flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4.justify-content 定义了项目在主轴上的对齐方式 [4 vs 5]
5.align-items属性 定义项目在交叉轴上如何对齐[4 vs 5]
6.align-content属性 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用；[4 and 5]

二：项目【子元素】属性
1.order :子元素实现插队功能
2.flex-grow ：子元素放大功能 [2 vs 3]
3.flex-shrink :子元素缩小[2 vs 3]
4.flex:
5.align-self:可设置不同与其他子元素的对齐方式

order : 定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
flex ：flex属性是flex-grow, flex-shrink 和 flex-basis的简写 经典 flex:1
align-self:属性允许单个项目有与其他项目不一样的对齐方式
-->
</head>
<style>
    .contria{
        width: 1400px;
        /*一设置弹性布局*/
        display: flex;
        /*内部元素的排列方式：从左到右、从右到左、从上到下、从下到上；*/
        /*flex-direction: row | row-reverse | column | column-reverse;*/
        flex-direction: row-reverse;
        /*flex-wrap: nowrap | wrap | wrap-reverse;*/
        /*默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行；*/
        /*简化：子元素的换行方式：不换行；换行，第一行在上面；换行，第二行在上面；*/
        flex-wrap: nowrap;

        /*justify-content属性定义了项目在主轴上的对齐方式；*/
        /*简化：设置子元素的水平对齐方式；
        justify-content: flex-start | flex-end | center | space-between | space-around
        */
        justify-content: space-between;

    }
     .div1,.div2,.div3,.div4,.div5,.div6,.div7{
         width: 120px;
         height: 200px;
     }

    .div1{
        background-color: rebeccapurple;

    }
    .div2{
        background-color: wheat;
    }
    .div3{
        background-color: red;
    }
    .div4{
        order: -23;
        flex-grow: 1;
        background-color: yellow;
    }
    .div5{
        background-color: rosybrown;
    }
    .div6{
        background-color: yellowgreen;
    }
    .div7{
        background-color: goldenrod;
    }

</style>
<body>
<div class="contria">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    <div class="div7"></div>
</div>
</body>
</html>